import { useDispatch } from 'react-redux';
import { delAction } from '../store/action/todo';
import { useAppSelector } from './../store/index';
export default function Main() {
  const { list } = useAppSelector((state) => state.todo);
  const dispatch = useDispatch();

  return (
    <section className="main">
      <input id="toggle-all" className="toggle-all" type="checkbox" />
      <label htmlFor="toggle-all">全选</label>
      <ul className="todo-list">
        {list.map((item) => (
          <li className={item.isDone ? 'completed' : ''} key={item.id}>
            <div className="view">
              <input checked={item.isDone} className="toggle" type="checkbox" />
              <label>{item.task}</label>
              <button
                onClick={() => dispatch(delAction(item.id))}
                className="destroy"
              ></button>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}
